<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
</head>
<body>
	<div class="ibox-content">
		<form class="form-horizontal" id="dataform"
			onsubmit="javascripr:return false;">
			<input type="hidden" name="tokenUrl" value="${tokenUrl}"> <input
				type="hidden" name="token" value="${token}">
			<c:if test="${obj ne null }">
				<input type="hidden" name="caseId" value="${obj.caseId }">
			</c:if>
			<div class="form-group">
				<label class="col-sm-2 control-label">标题 <span class="text-danger">*</span></label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="caseTitle"
						maxLength="20" dataType="s1-20" 
						value="<c:out value="${obj.caseTitle }"></c:out>" nullmsg="标题不能为空">
				</div>
				<label class="col-sm-2 control-label">价格 <span class="text-danger">*</span></label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="casePrice"
						maxLength="11" dataType="/^[0-9]{1,8}(\.[0-9]{1,2})?$/" 
						value="<c:out value="${obj.casePrice }"></c:out>" nullmsg="价格不能为空">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">风格 <span class="text-danger">*</span></label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="caseStyle"
						maxLength="20" dataType="*1-20" 
						value="<c:out value="${obj.caseStyle }"></c:out>" nullmsg="风格不能为空">
				</div>
				<label class="col-sm-2 control-label">材质 <span class="text-danger">*</span></label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="caseMaterial"
						maxLength="20" dataType="*1-20" 
						value="<c:out value="${obj.caseMaterial }"></c:out>" nullmsg="材质不能为空">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">尺寸 <span class="text-danger">*</span></label>
				<div class="col-sm-4">
					<input type="text" class="form-control" name="caseSize"
						maxLength="20" dataType="*1-20" 
						value="<c:out value="${obj.caseSize }"></c:out>" nullmsg="尺寸不能为空">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">简要描述 <span class="text-danger">*</span></label>
				<div class="col-sm-10">
					<textarea type="text" class="form-control" name="caseDescription"
						maxLength="500" dataType="*1-500" style="height:100px;resize:none;"
						nullmsg="简要描述不能为空"><c:out value="${obj.caseDescription }"></c:out></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">图集 <span class="text-danger">*</span></label>
				<div class="col-sm-10">
					<div class="col-sm-5" style="padding-left: 0;" id="fileTips">
						<a onclick="MTools.chooesFile('#fileText')" class="btn btn-primary radius"> 
							<i class="fa fa-cloud-upload"></i> 浏览文件 </a> 
					</div>
					<div class="col-sm-4">
						<input type="hidden" value="${obj.caseImgs }" name="caseImgs" id="hiddenImg" />
						<img width="50" height="50" id='img_1' style="display: none" />
					</div>
				</div>
			</div>
			<div id="uploadImgs" class="form-group">
				<div class="col-sm-12" style="margin-bottom: 5px" v-for="(img, index) in caseImgs">
					<div class="col-sm-2">
						<a style="font-size: 30px;color: red;float: right;" @click="delImg(index)"><i class="fa fa-close"></i></a>
					</div>
					<img class="col-sm-8" :src="img" />
				</div>
			</div>
			<div class="form-group ">
				<div class="col-sm-12 text-center">
					<a href="javascript:;" onclick="myForm.submit()"
						class="btn btn-success radius"><i class="fa fa-check"></i> 保存</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a class="btn btn-danger radius" href="javascript:;"
						onclick="MTools.closeForm()"><i class="fa fa-close"></i> 关闭</a>
				</div>
			</div>
		</form>
	</div>
	<form class="form form-horizontal" method="post" style="display: none;"
		enctype="multipart/form-data" target="blankFrame"
		action="${path }/admin/uploadFile/doMultiUpload?fileType=image&callBack=upcallback&inputId=hiddenImg">

		<input id="fileText" type="file" multiple="multiple" name="file-1"
			onchange="MTools.selectFile('#showFileName','#fileText','#submitBtn')" />
			
		<input type="submit" id="submitBtn" onclick="MTools.upolad('img_1','file_1')" />
	</form>
	<iframe src="" name="blankFrame" id="blankFrame" style="display: none;"> </iframe>
</body>
<script type="text/javascript"
	src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript"
		src="${path }/resource/js/plugin/vue.min.js"></script>
<script type="text/javascript">
	MTools.autoFullSelect();
	$(".select2").select2();
	var myForm = MForm.initForm({
		invokeUrl : "${path}/admin/disClassicCase/addOrModify",
		beforeSubmit : function() {
			if(!caseImgList || caseImgList.length == 0) {
				layer.tips('图集不能为空！', '#fileTips', {
					tips : 1
				});
				return false;
			}
			$('#hiddenImg').val(caseImgList.join(";"));
		},
		afterSubmit : function() {
			parent.myGrid.serchData();
		},
	});
	
	var caseImgList = new Array();
	if('${obj.caseImgs}' && '${obj.caseImgs}' != '') {
		caseImgList = '${obj.caseImgs}'.split(";");
	}
	
	var vuediv = new Vue({
		el : '#uploadImgs',
		data : {
			caseImgs : caseImgList
		},
		methods: {
			delImg : function(index) {
				caseImgList.splice(index, 1);
			}
		}
	});
	
	//上传文件回调
	function upcallback(inputId, url) {
		var imgs = url.split(";");
		$.each(imgs, function(i, img) {
			caseImgList.push(img);
		})
		$('#img_1').hide();
	}
</script>
</body>
</html>